<template>
  <div class="cart-view">
    <van-nav-bar title="购物车" />
    <van-empty description="您的购物车有点寂寞" v-if="!isLogin">
      <van-button plain round color="#2b4c7e" class="bottom-button" @click="goMenu">去喝一杯</van-button>
    </van-empty>
    <div class="wrap" v-else>
      <van-cell-group>
        <van-cell title="饮品与小食订单"></van-cell>
        <van-cell-group class="productsWrap">
          <van-cell>
            <template #title>
              <van-card
                price="2.00"
                desc="描述信息"
                title="商品标题"
                thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
              >
                <template #footer>
                  <van-stepper v-model="value" min="0" theme="round" button-size="22" disable-input @change="onChange"/>
                </template>
              </van-card>
            </template>
            <template #icon>
              <van-checkbox v-model="checked" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-card price="2.00" origin-price="10.00" class="cart-bottom">
          <template #num>
            <van-button size="small" round type="primary">去结算</van-button>
          </template>
        </van-card>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
import empty from "@/assets/cart/empty.png";
export default {
  data() {
    return {
      empty,
      isLogin: true,
      checked: true,
      value:1
    };
  },
  methods: {
    goMenu() {
      this.$router.push("/menu");
    },
    onChange(value,detail){
      console.log(value,detail);
      if(value=='0'){
        this.$dialog.confirm({
          message:"确定不要了吗？"
        }).then(()=>{
          console.log("确认")
        }).catch(()=>{
          this.value=1
        })
      }
      
    },
  }
};
</script>
<style lang="less">
.cart-view {
  height: 100%;
  background-color: #efefef;
  overflow: scroll;
  .wrap{
    padding: 0 8px;
  }
  .van-card{
    background: #ffffff;
  }
  .productsWrap {
    .van-card{
      padding-left: 0;
      padding-right: 0;
      .van-card__content{
        min-height: auto;
        justify-content: center;
      }
    }
  }

  .cart-bottom {
    &:not(:first-child) {
      margin-top: 0;
    }
    .van-card__content {
      min-height: auto;
    }
    .van-button--primary {
      background-color: #de5124;
      border: 1px solid #de5124;
    }
  }
}
</style>